<template>
  <div class="page-box">
    <div class="whiteback">
      <left></left>
      <div class="right">
        <transition name="el-fade-in-linear">
          <el-form class="form" v-if="show">
            <p class="sign">找回密码 FORGET PASSWORD</p>
            <el-form-item>
              <p style="font-size: 15px; margin: 0; font-weight: lighter;">账号 Account</p>
              <input v-model="username" class="input">
            </el-form-item>
            <el-form-item>
              <p style="font-size: 15px; margin: 0; font-weight: lighter;">身份证后六位 PASSWORD</p>
              <input v-model="idcard" class="input" type="password">
            </el-form-item>
            <div style="height: 45px; display: flex;">
              <p class="hoveroptions" @click="goto('login')">返回登录?</p>
              <p class="hoveroptions" @click="goto('enroll')">现在注册?</p>
            </div>
            <el-form-item>
              <button class="submit" @click="submit($event)">立即找回</button>
            </el-form-item>
          </el-form>
        </transition>
      </div>
    </div>
    <div class="password">
      <el-dialog
        title="设置密码"
        :visible.sync="vis"
        width="30%"
        :before-close="handleClose">
        <div style="margin: -30px;"></div>
        <el-form v-if="show">
          <p style="color: #6b6969;">请输入密码</p>
          <el-input v-model="password" type="password"></el-input>
          <p style="color: #6b6969;">请再次输入密码</p>
          <el-input v-model="repeatpassword" type="password"></el-input>
        </el-form>
        <div style="margin: 25px auto; width: 100%; display: flex; justify-content: flex-end;">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="actual">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import '@/assets/adminlogin/loginmain.css'
import '@/assets/adminlogin/loginright.css'
import Left from "@/components/adminlogin/left.vue";

export default {
  components: { Left },
  data() {
    return {
      username: "",
      idcard: "",
      password: "",
      repeatpassword: "",
      enroll: "enroll",
      login: "login",
      show: false,
      vis: false,
      form: {}
    };
  },
  methods: {
    submit(event) {
      event.preventDefault();
      if (this.username === '' || this.idcard === '') {
        this.$message.error("信息不完善");
        return;
      }
      if (this.usepwd) {
        this.vis = true;
      } else {
        this.form = {
          username: this.username,
          password: this.idcard,
          idCard: this.idcard,
        };
        this.toback(this.form);
      }
    },
    toback(form) {
      const adminDTO = {
        username: form.username,
        password: form.password,
        newPaw: form.password,
        idCard: form.idCard,
      };

       this.$axios.post('/api/admin/forget', adminDTO)
      .then(res => {
        console.log("API Response:", res.data); // 调试信息
        if (res.data.code === 200) {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          // 延迟一段时间再跳转，确保页面渲染完成
          setTimeout(() => {
            this.$router.push('/login');
          }, 1000); // 延迟 1 秒
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      })
      .catch(() => {
        this.$message({
          message: '网络连接失败',
          type: 'error'
        });
      });
  },
    goto(route) {
      this.$router.push('/' + route);
    },
    handleClose() {
      this.vis = false;
    },
    cancel() {
      this.password = "";
      this.vis = false;
    },
    actual() {
      if (this.repeatpassword !== this.password) {
        this.$message.error("两次输入密码不相同");
        this.password = '';
        this.repeatpassword = '';
        return;
      }
      this.form = {
        username: this.username,
        password: this.password,
        idCard: this.idcard,
      };
      this.toback(this.form);
      this.password = "";
      this.vis = false;
    }
  },
  mounted() {
    this.show = true;
  }
}
</script>

<style>
.password {
  z-index: 9999;
}
.whiteback {
  z-index: 0;
}


</style>
